<template>
  <div class="app">
    <h1>{{msg}}学生姓名：{{studentName}}</h1>
    <!--绑定一个自定义事件，实现子给父传数据  -->
    <Student @bug="getStudent" />
    <!--绑定一个自定义事件，实现子给父传数据-->
    <!--<Student ref="student" />-->
    <hr />
    <!--通过父组件传递一个函数，子组件props接受到函数，之后再调用，把值返回给父组件-->
    <School :getSchoolName="getSchoolName" />
  </div>
</template>

<script>
import Student from "./components/Student.vue";
import School from "./components/School.vue";
export default {
  name: "App",
  data() {
    return {
      msg: "使用Vue",
      studentName: '',
    };
  },
  components: {
    Student,
    School,
  },
  methods: {
    getSchoolName(name) {
      console.log("app接收到了学校名", name);
    },

    getStudent(name) {
      console.log("app接收到了学生名字",name);
      this.studentName = name
    },
  },
  mounted() {
    // this.$refs.student.$on('bug',this.getStudent)
  }
};
</script>

<style scoped>
.app {
  background: rgb(112, 105, 105);
}
</style>